import React, { Component } from 'react';
import ProductStyled from './productsstyled';
import axios from 'axios';
import Banner from '../../components/banner/banner'

export default class products extends Component {
    constructor(props){
        super(props)
        this.state={
            data1:[],
            data2:[],
            data3:[]
        }
    }
    componentDidMount(){
        axios({
            url:" http://localhost:4000/data",
            method:"get"
        }).then((res)=>{
            // console.log(res.data);
            this.setState({
                data1:res.data.slice(0,4),
                data2:res.data.slice(4,8),
                data3:res.data.splice(8,1)

            })
            // console.log(this.state.data1);
            // console.log(this.state.data2);
            // console.log(this.state.data3);
        })
    }
    funindex=(index)=>{
        console.log(index);
    }
    render() {
        return (
            <div>
                <ProductStyled>
                    {/* 头部栏 */}
                    <header>
                        <img src="products/header-productsystem.png" alt=""/>
                    </header>
                    {/* 内容栏 */}
                    <section>
                        {/* 云平台栏 */}
                        <div className="cloudplatform">
                            <div className="cloudtitle">
                                <img src="products/line_left.png" alt=""/>
                                <span>智慧停车生态云平台</span>
                                <img src="products/line_right.png" alt=""/>
                            </div>
                            <div className="cloud">
                                <div className="cloudbanner">
                                    <img  className="phone" src="products/cptx_img_app.png" alt=""/>
                                    <div className="phonebanner">
                                        {/* banner图 */}
                                        <Banner></Banner>
                                    </div>
                                </div>
                                <div className="cloudshow">
                                    <div className="cloudshowtitle">
                                        <img src="products/cptx_icon_triangle.png" alt=""/>
                                        <span>美天停车APP</span>
                                    </div>
                                    <div>
                                        <img src="products/money.png" alt=""/>
                                        <span>自助缴费</span>
                                    </div>
                                    <div>
                                        <img src="products/leave.png" alt=""/>
                                        <span>极速离场</span>
                                    </div>
                                    <div>
                                        <img src="products/nochange.png" alt=""/>
                                        <span>免找零</span>
                                    </div>
                                </div>
                            </div>
                            <div className="cloudlist ">
                                <ul>
                                    <li>
                                        <h4>室内导航</h4>
                                        <p>基于iBeacon精准定位与导航，云端管理，拒绝出错，轻松找车位</p>
                                    </li>
                                    <li>
                                        <h4>预约停车</h4>
                                        <p>精准查找附近空闲车位并进行线上预约服务，有效解决找车位难题</p>
                                    </li>
                                    <li>
                                        <h4>在线支付</h4>
                                        <p>停车自动计时计费，费用一目了然，支付便捷，出入快速简单易行</p>
                                    </li>
                                    <li>
                                        <h4>共享车位</h4>
                                        <p>车位分时租赁，轻松赚月租</p>
                                    </li>
                                    <li>
                                        <h4>扫码充电</h4>
                                        <p>边停车边充电，操作方便，支付快捷</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        {/* 智能设备栏 */}
                        <div className="smalldevice">
                            <div className="smalldevtitle">
                                <img src="products/line_left.png" alt=""/>
                                <span>智能设备</span>
                                <img src="products/line_right.png" alt=""/>
                            </div>
                            {/* 路侧停车场 */}
                            <div className="roadasidedev">
                                <div className="roadasidetitle">
                                    <img src="products/cptx_icon_triangle.png" alt=""/>
                                    <span>路侧停车场设备</span>
                                </div>
                                <div className="roadasideconent">
                                    {
                                        this.state.data1.map((v)=>{
                                            return (
                                                <div className="roadasidebox" key={v.id}>
                                                    <img src={v.imgurl} alt=""/>
                                                    <h5>{v.title}</h5>
                                                    <p>{v.detail.slice(0,80)}</p>
                                                </div>
                                            )
                                        })
                                    }
                                   
                                </div>
                            </div>
                            {/* 封闭式停车场 */}
                            <div className="roadasidedev">
                                <div className="roadasidetitle">
                                    <img src="products/cptx_icon_triangle.png" alt=""/>
                                    <span>封闭式停车场</span>
                                </div>
                                <div className="roadasideconent">
                                    {
                                        this.state.data2.map((v)=>{
                                            return (
                                                <div className="roadasidebox" key={v.id}>
                                                    <img src={v.imgurl} alt=""/>
                                                    <h5>{v.title}</h5>
                                                    <p>{v.detail.slice(0,80)}</p>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                            {/* 智能立体停车库 */}
                            <div className="autostop">
                                <div className="roadasidetitle">
                                    <img src="products/cptx_icon_triangle.png" alt=""/>
                                    <span>智能立体停车库</span>
                                </div>
                                {
                                    this.state.data3.map((v)=>{
                                        return (
                                            <div className="autostopconent" key={v.id}>
                                                <img src={v.imgurl} alt=""/>
                                                <div>
                                                    <h5>{v.title}</h5>
                                                    <p>{v.detail}</p>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                            
                        </div>
                    </section>
                </ProductStyled>
            </div>
        )
    }
}
